<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分类页</title>
    <link rel="stylesheet" href="./css/style.css">
    <script src="../jquery.min.js"></script>
</head>

<body>
    <div class="fix-title">
        <div class="back">&lt;</div>
        <input type="text" placeholder="请输入关键字" id="ipt">
        <div class="text">确定</div>
    </div>
    <div class="history-list">
        <h3>历史记录 <span id="del">全部删除</span></h3>
        <ul id="record">
<!--            <li>记录1</li>-->
<!--            <li>记录2</li>-->
<!--            <li>记录3</li>-->
        </ul>
    </div>
    <div class="good-list">
        <ul class="data">
<!--            <li>-->
<!--                <img src="http://yun.itheima.com/Upload/Images/20220627/62b924298e658.jpg" alt="">-->
<!--                <h3>商品名称</h3>-->
<!--                <p>-->
<!--                    <span>￥200.200</span>-->
<!--                    <span>+</span>-->
<!--                </p>-->
<!--            </li>-->
<!--            <li>-->
<!--                <img src="http://yun.itheima.com/Upload/Images/20220627/62b924298e658.jpg" alt="">-->
<!--                <h3>商品名称</h3>-->
<!--                <p>-->
<!--                    <span>￥200.200</span>-->
<!--                    <span>+</span>-->
<!--                </p>-->
<!--            </li>-->
<!--            <li>-->
<!--                <img src="http://yun.itheima.com/Upload/Images/20220627/62b924298e658.jpg" alt="">-->
<!--                <h3>商品名称</h3>-->
<!--                <p>-->
<!--                    <span>￥200.200</span>-->
<!--                    <span>+</span>-->
<!--                </p>-->
<!--            </li>-->
<!--            <li>-->
<!--                <img src="http://yun.itheima.com/Upload/Images/20220627/62b924298e658.jpg" alt="">-->
<!--                <h3>商品名称</h3>-->
<!--                <p>-->
<!--                    <span>￥200.200</span>-->
<!--                    <span>+</span>-->
<!--                </p>-->
<!--            </li>-->
<!--            <li>-->
<!--                <img src="http://yun.itheima.com/Upload/Images/20220627/62b924298e658.jpg" alt="">-->
<!--                <h3>商品名称</h3>-->
<!--                <p>-->
<!--                    <span>￥200.200</span>-->
<!--                    <span>+</span>-->
<!--                </p>-->
<!--            </li>-->
<!--            <li>-->
<!--                <img src="http://yun.itheima.com/Upload/Images/20220627/62b924298e658.jpg" alt="">-->
<!--                <h3>商品名称</h3>-->
<!--                <p>-->
<!--                    <span>￥200.200</span>-->
<!--                    <span>+</span>-->
<!--                </p>-->
<!--            </li>-->
        </ul>
        <div class="empty">
            <ul>

            </ul>
            <span>空空如也...</span>
        </div>
        <p class="desc">数据正在加载中...</p>
        <p class="desc">我也是有底线的...</p>
    </div>

    <script>

        let index = localStorage.getItem("pageNum")

        $("#ipt").on('keyup', function (e) {
            // console.log(1)

            const id = $(this).val().trim()
            if (id.length <= 0) {
                return
            }
            console.log(id)
            $.ajax({
                method: "GET",
                url: 'http://124.223.14.236:3001/api/goods/{id}',
                data:{
                    id,
                },
                success(res) {
                    console.log(res)

                    // alert(JSON.stringify(res));
                    // 将服务器响应的数据map+join()
                    // const htmlStr = res.data.list.map(item => {
                    //     const { id, title, img, price } = item
                    //         return `
                    // <li>
                    //     <img src="${img}" alt="">
                    //     <h3>${title}</h3>
                    //     <p>
                    //         <span>￥${price}</span>
                    //         <span>+</span>
                    //     </p>
                    // </li>
                    // `
                    // }).join('')


                    // $(".data").html(htmlStr).show()
                }
            })


            if(e.keyCode = "Enter"){
                $("#record").prepend(`<li>${$(this).val().trim()}</li>`)
                if($("#record").length > 3)  $("#record").remove()
                $(this).val("")
            }
        })

        $("#del").click(function (){
            if($("#record").children.length > 1)   $("#record").remove()
            return console.log($("#record").children)
        })
    </script>
</body>

</html>